<template>
  <div class="tuijian" >
    <div class="hearder">
      <div class="hearder-img">
        <lunbo :pro="tuijianData.focusImages"></lunbo>
      </div>
    </div>

    <div class="content-classify">
      <div
        class="content-classify-item"
        v-for="(item, index) in tuijianData.tomatoes"
        :key="index"
        @click="goToList(index)"
      >
        <img :src="item.img" alt="" />
        <p>{{ item.name }}</p>
      </div>
    </div>

    <div class="content-center-nav">
      <div class="content-center-nav-left">
        <p>新人入站必听榜</p>
      </div>
      <div class="content-center-nav-right" >
        <p @click="toMost">更多&nbsp;></p>
      </div>
    </div>

    <div class="content-center-bos">
      <van-tabs
        line-width="60px"
        type="line"
        title-active-color="#e4393c"
        color="transparent"
        v-model="active"
      >
        <van-tab
          v-for="(item, index) in tuijianData.moduleRankDatas"
          :title="item.rankingContentInfoList.title"
          :key="index"
          title-style="background:'red'"
        >
          <div class="van-tab-content">
            <div
              class="van-tab-box"
              v-for="(item, index) in bangdanData[active]"
              :key="index"
              @click="goToDetail(item.albumInfo.id)"
            >
              <div class="van-tab-box-left">
                <img :src="imgSrc + item.albumInfo.cover" />
              </div>
              <div class="van-tab-box-right">
                <div class="van-tab-box-title-top">
                  {{ item.albumInfo.title + item.albumInfo.salePoint }}
                </div>
                <!-- <div class="van-tab-box-title-bottom">星评分</div> -->
              </div>
            </div>
          </div>
        </van-tab>
      </van-tabs>
    </div>

    <div class="content-center-nav-second">
      <van-nav-bar left-text="猜你喜欢" color="#fff">
        <template #right>
          <div @click="changeCardData">
            <img src="../assets/images/change.png" alt="" />
            <span class="change">换一批</span>
          </div>
        </template>
      </van-nav-bar>
    </div>

    <div class="test">
      <div class="card" v-for="(item, index) in cardData" :key="index">
        <van-card
          :price="item.data.statCountInfo.playCount"
          :desc="item.data.trackInfo.intro"
          :title="item.data.trackInfo.title"
          :thumb="imgSrc+item.data.trackInfo.cover" 
          currency=''
          tag="推荐"
          @click="goToDetail(item.data.trackInfo.albumId)"
        >
        </van-card>
      </div>
    </div>
  </div>
</template>

<script>
import card from "../components/card.vue";
import lunbo from "../components/lunbo.vue";
export default {
  name: "Tuijian",
  data() {
    return {
      tuijianData: {
        focusImages:[]
      },
      tuijianTitleData: [],
      bangdanData: [],
      cardData: [],
      imgSrc: "//imagev2.xmcdn.com/",
      active: 1,
    };
  },
  components: {
    card,
    lunbo,
  },
  created() {
    this.getTuiJianData();
    this.getTestData();
    // console.log(JSON.parse(localStorage.getItem("id")));
  },
  methods: {
    getTuiJianData() {
      this.axios({
        methods: "get",
        url: "https://apis.netstart.cn/ximalaya/index/queryIndexTabContent",
      })
        .then((result) => {
          // console.log(result.data.data.moduleContent);
          this.tuijianData = result.data.data.moduleContent;
          // console.log(this.tuijianData.focusImages);
          this.tuijianTitleData = result.data.data.moduleContent;
          let oldData = result.data.data.moduleContent.moduleRankDatas;
          let look = [];
          let newData = [];
          for (let i = 0; i < oldData.length; i++) {
            // console.log(oldData[i].rankingContentInfoList.rankModuleInfoList);
            newData = oldData[i].rankingContentInfoList.rankModuleInfoList;
            look.push(oldData[i].rankingContentInfoList.rankModuleInfoList);
          }
          this.bangdanData = look;
        })
        .catch((err) => {
          console.log(err);
        });
    },

    getTestData() {
      this.axios({
        method: "get",
        url: "https://apis.netstart.cn/ximalaya/index/queryCategoryFeed?",
        params: {
          moduleKey: "keji",
        },
      })
        .then((value) => {
          // console.log(value);
          // this.cardData = value.data.data.materials;
          
          let arr = value.data.data.materials;
          // console.log(arr);
          var result = [];
          var ranNum = 5;
          let kong = []
          for (var i = 0; i < arr.length; i++) {
            // var ran = Math.floor(Math.random() * arr.length);
            // result.push(arr.splice(ran, 1)[0]);
            result.push(arr[i]);
          }
          for (let j = 0; j < ranNum; j++) {
              let ran = Math.floor(Math.random() * result.length);
              kong.push(result.splice(ran,1)[0]);           
          }
          this.cardData = kong
        })
        .catch((err) => {
          console.log(err);
        });
    },
    changeCardData() {
      this.getTestData();
    },
    goToList(index) {
      // console.log(index);
      if(index === 0){
        this.$router.push({name: 'List'});
      }
    },
    goToDetail(id) {
      // console.log(id);
      this.$router.push({name:'Detail',params:{id}});

      var localIdData = localStorage.getItem("id");
  
        if (!localIdData) {
          localIdData = [];
        } else {
          localIdData = JSON.parse(localIdData);
        }
        localIdData.unshift(id);
        localStorage.setItem("id", JSON.stringify(localIdData));
    },
    toMost() {
      this.$router.push({name:'List'});

    }
  },
};
</script>

<style lang="less" scoped>
.hearder {
  margin-top: 5px;
  padding: 0 5px;

  .hearder-img {
    width: 365px;
    height: 100px;
    border-radius: 10px;
    text-align: center;
    vertical-align: middle;
    img {
      width: 365px;
      height: 100px;
      border-radius: 10px;
      background-size: cover;
    }
  }
}
.content-classify {
  display: flex;
  justify-content: space-around;
  .content-classify-item {
    margin-top: 10px;
    // background-color: red;
    text-align: center;
    img {
      height: 70px;
    }
    p {
      margin: 0;
    }
  }
}
.content-center-nav {
  width: 359px;
  // height: 40px;
  display: flex;
  margin-top: 5px;
  justify-content: space-between;
  align-items: center;
  padding: 0 8px;
  .content-center-nav-left {
    p {
      font-size: 18px;
      margin: 0;
    }
  }
  .content-center-nav-right {
    p {
      // font-size: 20px;
      color: #ccc;
    }
  }
}
.content-center-nav-second {
  margin-top: 15px;
  /deep/.van-nav-bar__text {
    color: #666666;
    font-size: 18px;
  }
  .change {
    color: #ccc;
  }
  img {
    width: 18px;
    margin-right: 5px;
  }
}
.van-tab-content {
  height: 180px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0 5px;
}
.van-tab-box {
  width: 180px;
  // flex: 1;
  height: 60px;
  margin-top: 5px;

  .van-tab-box-left {
    width: 60px;
    float: left;
    img {
      width: 60px;
      height: 60px;
      // margin-top: 11px;
    }
  }
  .van-tab-box-right {
    width: 120px;
    float: left;
    margin: 0;

    .van-tab-box-title-top {
      font-size: 14px;
      margin: 0;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      display: -webkit-box;
      overflow: hidden;
      text-overflow: ellipsis;
      word-wrap: break-word;
      word-break: normal;
    }
    .van-tab-box-title-bottom {
      margin: 0;
    }
  }
}
.test {
  padding-bottom: 50px;
 
}
</style>